<script lang="ts" setup>
import { DatePicker, Dialog, TimePicker } from 'vant'
import moment from 'moment'

const props = defineProps<{
  current?: Date
  dateCb: (d?: Date) => void
}>()
const pickingDate = ref(true)

const d = computed(() => props.current ?? (new Date()))
const day = ref(moment(d.value).format('YYYY,MM,DD').split(','))

const timeOfDay = ref(moment(d.value).format('HH:mm').split(':'))

function confirm() {
  props.dateCb(new Date(`${day.value.join('-')} ${timeOfDay.value.join(':')}:00`))
  pickingDate.value = false
}

function cancel() {
  props.dateCb(undefined)
  pickingDate.value = false
}

setTimeout(() => {
  console.log('props.current')
  console.log(props.current)
}, 50)
</script>

<template>
  <!-- :z-index="1001" -->
  <Dialog
    :show="pickingDate"
    :show-cancel-button="true"
    @confirm="confirm"
    @cancel="cancel"
  >
    <div flex>
      <DatePicker
        v-model="day"
        title="选择日期"
        w="50%" ml="5%" mr="5%" b-r="1px solid #88888844"
        :show-toolbar="false"
        @click.stop
      />
      <TimePicker
        v-model="timeOfDay"
        :show-toolbar="false" w="30%" mr="5%"
      />
    </div>
  </Dialog>
</template>

<style scoped>

</style>
